<template>
  <div class="app-container">
    <el-dialog
      :visible="visible"
      :title="$t('info')"
      width="800px "
      @close="close"
    >
      <el-form
        ref="detailRef"
        :model="detailDataForm"
        :disabled="operation === 0"
      >
        <el-descriptions
          class="margin-top"
          :title="$t('BasicInformation')"
          :column="2"
          border
          style="width: 700px; padding-left: 30px; margin: 0 auto"
        >
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("statusLang.status") }}
            </template>
            {{
              this.$t(
                "statusLang." +
                  getTitleByValue(
                    deliveryStatusOptions,
                    detailDataForm.orderStatus
                  )
              )
            }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.orderNumber") }}
            </template>
            {{ detailDataForm.orderNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.overseasDepot") }}
            </template>
            {{ detailDataForm.depotCodeAndName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.logisticsProducts") }}
            </template>
            {{ detailDataForm.channelName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.customerName") }}
            </template>
            {{ detailDataForm.customerCodeAndName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("warehouseEntryLang.provider") }}
            </template>
            {{ detailDataForm.providerName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("warehouseEntryLang.managerPerson") }}
            </template>
            {{ detailDataForm.managerPerson }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.providerChannel") }}
            </template>
            {{ detailDataForm.providerChannel }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('warehouseEntryLang.InsuredOrNot')">
            <el-tag :type="Tag[detailDataForm.buyInsurance]">
              <span>{{
                detailDataForm.buyInsurance === 1
                  ? this.$t("yes")
                  : this.$t("no")
              }}</span>
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('warehouseEntryLang.RefundOrNot')">
            <el-tag :type="Tag[detailDataForm.returnTax]">
              <span>{{
                detailDataForm.returnTax === 1 ? this.$t("yes") : this.$t("no")
              }}</span>
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          :title="$t('warehouseEntryLang.shipper')"
          :column="2"
          border
          style="width: 700px; padding-left: 30px; margin: 0 auto"
        >
          <el-descriptions-item :label="$t('warehouseEntryLang.shipper')">{{
            detailDataForm.contacts
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('depotLang.contactPhone')">{{
            detailDataForm.contactsPhone
          }}</el-descriptions-item>
          <el-descriptions-item
            :label="$t('warehouseEntryLang.shippingRemarks')"
          >{{ detailDataForm.remake }}</el-descriptions-item>
        </el-descriptions>
      </el-form>
      <h3>其他信息</h3>
      <div>
        <el-tabs type="border-card">
          <!-- 装箱清单 -->
          <el-tab-pane :label="$t('harvestLang.packingList')">
            <el-table :data="packingListData" border class="mt-10">
              <el-table-column
                :label="$t('tableIndex')"
                type="index"
                align="center"
                width="80"
              />
              <el-table-column
                :label="$t('goodsSKULang.boxNumber')"
                prop="boxBarCode"
                align="center"
              />
              <el-table-column
                :label="
                  $t('goodsSKULang.length') +
                    '*' +
                    $t('goodsSKULang.width') +
                    '*' +
                    $t('goodsSKULang.height') +
                    '(CM)'
                "
                prop="boxSize"
                align="center"
              />
              <el-table-column
                :label="$t('goodsSKULang.weight') + '(KG)'"
                prop="boxWeight"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <!-- 入库单箱子明细 -->
          <el-tab-pane :label="$t('harvestLang.boxDetail')">
            <el-table :data="boxDetailData" border class="mt-10">
              <el-table-column
                :label="$t('tableIndex')"
                type="index"
                align="center"
                width="80"
              />
              <el-table-column
                :label="$t('goodsSKULang.boxNumber')"
                prop="boxBarCode"
                align="center"
                width="150"
              />
              <el-table-column
                :label="$t('goodsSKULang.skuCode')"
                prop="skuCode"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('goodsSKULang.goodsName')"
                prop="skuName"
                align="center"
              />
              <el-table-column
                :label="$t('harvestLang.deliveryQuantity')"
                prop="skuNum"
                align="center"
              />
              <el-table-column
                :label="$t('harvestLang.transitReceipts')"
                prop="transReceivedNum"
                align="center"
              />
              <el-table-column
                :label="$t('harvestLang.receivedNumberOfDestination')"
                prop="receivedNum"
                align="center"
              />
              <el-table-column
                :label="$t('goodsSKULang.numberOfShelves')"
                prop="shelfStockingNum"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <!-- 入库单产品明细-->
          <el-tab-pane :label="$t('harvestLang.productsDetail')">
            <el-table :data="productsDetailData" border class="mt-10">
              <el-table-column
                :label="$t('tableIndex')"
                type="index"
                align="center"
                width="80"
              />
              <el-table-column
                :label="$t('goodsSKULang.skuCode')"
                prop="skuCode"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('goodsSKULang.goodsName')"
                prop="skuName"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('harvestLang.deliveryQuantity')"
                prop="skuNum"
                align="center"
              />
              <el-table-column
                :label="$t('harvestLang.transitReceipts')"
                prop="transReceivedNum"
                align="center"
              />
              <el-table-column
                :label="$t('harvestLang.receivedNumberOfDestination')"
                prop="receivedNum"
                align="center"
              />
              <el-table-column
                :label="$t('goodsSKULang.numberOfShelves')"
                prop="shelfStockingNum"
                align="center"
              />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deliveryStatusDict } from '@/utils/dictData'
import { getDictOptionList, getTitleByValue } from '@/utils/dictUtils'
import { getOrderInfo } from '@/api/WMS-order/warehouseEntry'
import {
  getDeliveredOrderBoxList,
  getDeliveredOrderBoxSkuList,
  getDeliveredOrderSkuList
} from '@/api/business/warehouseManage/harvest'
export default {
  name: 'InfoForm',
  props: {
    value: {
      type: Number,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    },
    operation: {
      type: Number,
      default: 0 // 0 查看
    }
  },
  data() {
    return {
      Tag: ['danger', 'success'],
      detailDataForm: {},
      packingListData: [], // 装箱清单
      boxDetailData: [], // 入库单箱子明细
      productsDetailData: [], // 入库单产品明细
      getTitleByValue: getTitleByValue,
      deliveryStatusDict: deliveryStatusDict,
      deliveryStatusOptions: getDictOptionList(deliveryStatusDict) // 状态下拉
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.getData()
          this.getDeliveredOrderBoxList()
          this.getDeliveredOrderBoxSkuList()
          this.getDeliveredOrderSkuList()
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 基础信息
    async getData() {
      if (!this.value) return
      const res = await getOrderInfo({
        orderId: this.value
      })
      if (!res || res.data === null) return
      this.detailDataForm = res.data
      console.log(res.data, '回显')
    },
    // 装箱清单详情
    async getDeliveredOrderBoxList() {
      const { data } = await getDeliveredOrderBoxList({
        orderId: this.value
      })
      console.log(data, '装箱清单')
      this.packingListData = data.boxPageDTOList
    },
    // 入库单箱明细
    async getDeliveredOrderBoxSkuList() {
      const { data } = await getDeliveredOrderBoxSkuList({
        orderId: this.value
      })
      console.log(data, '入库单箱明细')
      this.boxDetailData = data.boxSkuDTOList
    },
    // 入库单产品明细
    async getDeliveredOrderSkuList() {
      const { data } = await getDeliveredOrderSkuList({
        orderId: this.value
      })
      console.log(data, '入库单产品明细')
      this.productsDetailData = data.boxSkuDTOList
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
::v-deep .el-descriptions__header {
  margin-top: 20px;
}
</style>
